<!DOCTYPE html>
<html>
	<head>
		<title>个人资料</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<style>
			.profile-container {
				padding: 20px;
				background: #fff;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			}
			.avatar-container {
				text-align: center;
				margin-bottom: 20px;
			}
			.avatar-uploader {
				display: inline-block;
			}
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 50%;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}
			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}
			.avatar {
				width: 120px;
				height: 120px;
				border-radius: 50%;
				display: block;
			}
			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 120px;
				height: 120px;
				line-height: 120px;
				text-align: center;
				border-radius: 50%;
			}
			.form-container {
				max-width: 600px;
				margin: 0 auto;
			}
			.form-title {
				font-size: 18px;
				color: #303133;
				margin-bottom: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #EBEEF5;
			}
			.form-footer {
				text-align: center;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="profile-container">
				<!-- 头像上传 -->
				<div class="avatar-container">
					<el-upload
						class="avatar-uploader"
						action="http://localhost:8080/files/upload"
						name="image"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="userInfo.image" :src="baseImageUrl + userInfo.image" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				
				<!-- 个人信息表单 -->
				<div class="form-container">
					<div class="form-title">个人信息</div>
					<el-form :model="userInfo" :rules="rules" ref="userForm" label-width="100px">
						<el-form-item label="昵称" prop="nickname">
							<el-input v-model="userInfo.nickname" placeholder="请输入昵称"></el-input>
						</el-form-item>
						<el-form-item label="用户名" prop="username">
							<el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
						</el-form-item>
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
						</el-form-item>
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="userInfo.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
						<el-form-item label="性别" prop="sex">
							<el-radio-group v-model="userInfo.sex">
								<el-radio label="男">男</el-radio>
								<el-radio label="女">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="角色">
							<el-tag :type="userInfo.role === 'ADMIN' ? 'danger' : 'success'">
								{{userInfo.role === 'ADMIN' ? '管理员' : '普通用户'}}
							</el-tag>
						</el-form-item>
						<el-form-item label="注册时间">
							<span>{{userInfo.createTime}}</span>
						</el-form-item>
					</el-form>
					
					<div class="form-footer">
						<el-button type="primary" @click="submitForm('userForm')">保存修改</el-button>
						<el-button @click="resetForm('userForm')">重置</el-button>
					</div>
				</div>
			</div>
		</div>
		
		<script>
			new Vue({
				el: '.vue-box',
				data: {
					baseImageUrl: 'http://8.134.184.130:8008/images/',
					userInfo: {
						id: '',
						nickname: '',
						username: '',
						email: '',
						phone: '',
						sex: '男',
						role: '',
						image: '',
						createTime: ''
					},
					rules: {
						nickname: [
							{ required: true, message: '请输入昵称', trigger: 'blur' },
							{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
						],
						username: [
							{ required: true, message: '请输入用户名', trigger: 'blur' },
							{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
						],
						email: [
							{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
							{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
						],
						phone: [
							{ required: true, message: '请输入手机号', trigger: 'blur' },
							{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
						]
					}
				},
				created() {
					this.getUserInfo();
				},
				methods: {
					// 获取用户信息
					getUserInfo() {
						$.ajax({
							url: 'http://localhost:8080/user/SelectByUserId?id=1',
							type: 'GET',
							success: function(res) {
								if(res.code === 200) {
									this.userInfo = res.data;
								} else {
									this.$message.error(res.message || '获取用户信息失败');
								}
							}.bind(this)
						});
					},
					// 头像上传前的处理
					beforeAvatarUpload(file) {
						const isImage = file.type.indexOf('image/') === 0;
						const isLt5M = file.size / 1024 / 1024 < 5;

						if (!isImage) {
							this.$message.error('只能上传图片文件!');
							return false;
						}
						if (!isLt5M) {
							this.$message.error('图片大小不能超过 5MB!');
							return false;
						}
						return true;
					},
					// 头像上传成功的处理
					handleAvatarSuccess(res, file) {
						console.log("上传响应:", res);
						console.log("文件信息:", file);

						// 根据后端返回的 ResultVO 格式获取图片URL
						let imageUrl = '';
						if (res && res.data) {
							imageUrl = res.data; // ResultVO 中的 data 字段包含文件路径
						} else if (res && res.url) {
							imageUrl = res.url; // 兼容其他可能的格式
						} else {
							console.error("无法获取图片URL:", res);
							this.$message.error('图片上传失败');
							return;
						}

						// 检查是否是完整URL
						let imageFileName = '';
						if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
							// 如果是完整URL，提取文件名
							const fileNameMatch = imageUrl.match(/\/([^\/]+)$/);
							if (fileNameMatch) {
								imageFileName = fileNameMatch[1]; // 获取文件名部分
							} else {
								imageFileName = imageUrl; // 如果没有匹配到，使用完整URL
							}
						} else {
							// 如果只是文件名，直接使用
							imageFileName = imageUrl;
						}

						console.log("处理的头像文件名:", imageFileName);

						this.userInfo.image = imageFileName; // 保存文件名
						
						this.$message.success('头像上传成功');
					},
					// 提交表单
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								$.ajax({
									url: 'http://localhost:8080/user/updateUser',
									type: 'POST',
									data: this.userInfo,
									success: function(res) {
										if(res.code === 200) {
											this.$message.success('保存成功');
											// 更新父窗口的用户信息
											if(parent.sa_admin) {
												parent.sa_admin.user = {
													username: this.userInfo.nickname,
													avatar: this.baseImageUrl + this.userInfo.image
												};
											}
										} else {
											this.$message.error(res.message || '保存失败');
										}
									}.bind(this)
								});
							}
						});
					},
					// 重置表单
					resetForm(formName) {
						this.$refs[formName].resetFields();
						this.getUserInfo();
					}
				}
			})
		</script>
	</body>
</html> 